<template>
  <div>
    <!-- 文章列表项开始 -->
    <!-- <van-cell title="单元格" value="内容" label="描述信息" /> -->
    <van-cell
      class="article-item"
      :to="{ name: 'article', params: { articleId: article.art_id } }"
    >
      <!-- 标题部分开始 -->
      <!-- van-multi-ellipsis--l2;vant提供vant超过两行变成...的类名 -->
      <div slot="title" class="title van-multi-ellipsis--l2">
        {{ article.title }}
      </div>
      <!-- 标题部分结束 -->

      <!-- 描述信息部分开始 -->
      <div slot="label">
        <!-- 显示三张图片区域开始 -->
        <div v-if="article.cover.type === 3" class="cover-wrap">
          <!-- cover-item这个类名以及所在div盒子为了好调整样式 -->
          <div
            class="cover-item"
            v-for="(img, index) in article.cover.images"
            :key="index"
          >
            <!-- vant图片fit="cover"展现短边 -->
            <van-image :src="img" fit="cover" class="cover-item-img" />
          </div>
        </div>
        <!-- 显示三张图片区域结束 -->
        <!-- 作者名,评论数,评论时间部分开始 -->
        <div class="label-info-wrap">
          <span>{{ article.aut_name }}</span>
          <span>{{ article.comm_count }}评论</span>
          <span>{{ article.pubdate | relativeTime }}</span>
        </div>
        <!-- 作者名,评论数,评论时间部分结束 -->
      </div>
      <!-- 描述信息部分结束 -->

      <!-- 内容部分开始(如果只有一张图片显示这里) -->
      <!-- vant图片fit="cover"展现短边（由于默认拉伸） -->
      <van-image
        v-if="article.cover.type === 1"
        slot="default"
        class="right-cover"
        fit="cover"
        :src="article.cover.images[0]"
      />
      <!-- 内容部分结束 -->
    </van-cell>
    <!-- 文章列表项结束 -->
  </div>
</template>

<script>
export default {
  name: "ArticleItem",
  props: {
    article: {
      type: Object,
      required: true,
    },
  },
  data() {
    return {};
  },
  components: {},
  mounted() {},
  methods: {},
};
</script>
<style scoped lang="less">
.article-item {
  // 标题大小
  .title {
    font-size: 32px;
    color: #3a3a3a;
  }

  // 图片存放容器（取消flex改成固定）
  .van-cell__value {
    flex: unset;
    width: 232px;
    height: 146px;
    padding-left: 25px;
  }

  //只有一张图片显示位置
  .right-cover {
    width: 232px;
    height: 146px;
  }
  //  作者名,评论数,评论时间部分
  .label-info-wrap span {
    font-size: 22px;
    color: #b4b4b4;
    margin-right: 25px;
  }

  // 显示三张图片区域
  .cover-wrap {
    display: flex;
    // 上下内边
    padding: 30px 0;
    .cover-item {
      flex: 1;
      height: 146px;
      // **不包含最后一个设置**
      &:not(:last-child) {
        padding-right: 4px;
      }
      .cover-item-img {
        // 父元素flex所以直接100%
        width: 100%;
        height: 146px;
      }
    }
  }
}
</style>
